#special{
    .head {
        padding: 40px 0;
        display: flex;
        align-items: flex-end;
    
        h3 {
            flex: 1;
            font-size: 32px;
            font-weight: 400;
            margin-left: 6px;
            height: 35px;
            line-height: 35px;
    
            span {
                font-size: 16px;
                color: #999;
                margin-left: 20px;
            }
        }
    }
    
    .special_list {
        height: 380px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
    
        .hover{
            transform: translate3d(0,-3px,0);
        // box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .l {
            width: 404px;
            background: #fff;
            transition: all .5s;
    
            a {
                display: block;
                width: 100%;
                height: 288px;
                position: relative;
    
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
    
                .meta {
                    background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 50%);
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 288px;
    
                    .title {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        padding-left: 16px;
                        width: 70%;
                        height: 70px;
    
                        span {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
    
                            &:nth-of-type(1) {
                                color: #fff;
                                font-size: 22px;
                                display: block;
                            }
    
                            &:nth-of-type(2) {
                                display: block;
                                font-size: 19px;
                                color: #999;
                            }
                        }
                    }
    
                    .price {
                        position: absolute;
                        bottom: 25px;
                        right: 16px;
                        line-height: 1;
                        padding: 4px 8px 4px 7px;
                        color: #cf4444;
                        font-size: 17px;
                        background-color: #fff;
                        border-radius: 2px;
                    }
                }
            }
    
            .foot {
                height: 72px;
                line-height: 72px;
                padding: 0 20px;
                font-size: 16px;
    
                span {
                    vertical-align: middle;
    
                    &:nth-of-type(1) {
                        float: left;
                        margin-right: 25px;
                    }
    
                    &:nth-of-type(3) {
                        float: right;
                    }
                }
            }
        }
    }
}